<template>
  <el-container>
    <el-header class="elheader">
      <el-row>
        <el-col :span="22" style="display: flex">
          <el-button type="primary" @click="handleAdd" :disabled="!hasAdd">
            添加
          </el-button>
          <el-form ref="qyeryData" :model="qyeryData" label-width="80px">
            <el-form-item label="角色名称">
              <el-input
                v-model="qyeryData.name"
                clearable
                @change="query"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" class="flexend">
          <el-button type="primary" @click="query">查询</el-button>
        </el-col>
      </el-row>
    </el-header>
    <backline />
    <el-main>
      <pg-el-table-url
        ref="pgTable"
        :qyeryData="qyeryData"
        :tableHeadConfig="tableHeadConfigUrl"
        tableUrl="/api/Role/QueryData"
      >
        <template v-slot:operation="slotData">
          <el-button
            type="info"
            :disabled="!hasQuery"
            @click="handleEdit(slotData.elscope.row), false"
          >
            查看
          </el-button>
          <el-button
            type="primary"
            :disabled="!hasUpdate"
            @click="handleEdit(slotData.elscope.row, true)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            :disabled="!hasDelete"
            @click="handleDelete(slotData.elscope.$index, slotData.elscope.row)"
          >
            删除
          </el-button>
        </template>
      </pg-el-table-url>
    </el-main>

    <el-dialog
      title="角色信息"
      :visible.sync="dialogFormVisible"
      width="1000px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="dialogform" :disabled="!isEdit">
        <el-form-item label="角色名称">
          <el-input
            v-model="dialogform.name"
            autocomplete="off"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="权限管控" class="role">
          <el-tree
            :data="dialogform.menuButtonTreeDtoList"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <span class="customTreeNode" slot-scope="{ node, data }">
              <!-- <span style="flex: 1">{{ node.label }}</span> -->
              <!-- <span>
                <el-button type="text"> Append </el-button>
                <el-button type="text"> Delete </el-button>
              </span> -->
              <span style="flex: 1">{{ data.name }}</span>
              <!-- <span>{{ JSON.stringify(data.buttonCodeList) }}</span> -->
              <el-checkbox-group v-model="data.buttonCodeList">
                <el-checkbox label="Query">查看</el-checkbox>
                <el-checkbox label="Add">添加</el-checkbox>
                <el-checkbox label="Update">修改</el-checkbox>
                <el-checkbox label="Delete">删除</el-checkbox>
              </el-checkbox-group>
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogFormVisible"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  GetRoleMenuTreeDto,
  AddOrUpdateRoleMenuTreeDto,
  DeleteRole,
} from "@/api/role";
import MyMixin from "@/util/mixin";
export default {
  mixins: [MyMixin],
  data() {
    return {
      qyeryData: {},
      tableHeadConfigUrl: [
        { field: "id", label: "Id", width: 200 },
        { field: "name", label: "角色名称" },
        {
          fixed: "right",
          columnType: "slot",
          slotName: "operation",
          label: "操作按钮",
          width: 300,
        },
      ],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogform: { name: "", menuButtonTreeDtoList: [] },
      isEdit: false,
    };
  },
  methods: {
    query() {
      this.$refs.pgTable.query();
    },
    async handleAdd() {
      this.dialogFormVisible = true;
      await this.loadRole(0);
      this.isEdit = true;
    },
    async handleEdit(row, isEdit) {
      this.dialogFormVisible = true;
      await this.loadRole(row.id);
      this.isEdit = isEdit;
    },
    async loadRole(roleId) {
      var res = await GetRoleMenuTreeDto({ roleId: roleId });
      this.dialogform = res.data;
    },
    async handleDelete(index, row) {
      console.log(index, row);

      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await DeleteRole({ roleId: row.id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.query();
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });

      //
    },
    async handleDialogFormVisible() {
      //添加或者修改用户信息
      if (this.isEdit) {
        await AddOrUpdateRoleMenuTreeDto(this.dialogform);
        console.log(this.dialogform);
        this.query();
      }
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.role {
  display: flex;
  flex-direction: column;
}
// .role > .el-form-item__label {
//   text-align: left !important;
// }
.customTreeNode {
  display: flex;
  width: 100%;
}
</style>